<template>
    <div class="container">
        <div class="nav">
            <div class="time">
                {{ time }}
            </div>
            <div class="city">切换城市</div>
        </div>
        <div class="city-info">
            <div class="city-name">{{ city }}</div>
            <p class="weather">{{ weatherDate?.weather }}</p>
            <h2 class="temp">
                <em>{{ weatherDate?.temperature }}</em>℃
            </h2>
            <div class="detail">
                <span>风力:{{ weatherDate?.windPower }}级</span>|
                <span>风向:{{ weatherDate?.windDirection }}风</span>|
                <span>湿度:{{ weatherDate?.humidity }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { ref, computed, onMounted } from 'vue';

const time = ref();
const city = ref();
const weatherDate = ref();
const setTime = () => {
    const date = new Date();
    const hour = date.getHours();
    const minute = date.getMinutes();
    time.value = `${hour}:${minute}`;
}
window._AMapSecurityConfig = {
    securityJsCode: 'c370ff22060c8db2fcae486edc0e96f9'
}
const initAMap = () => {
    AMapLoader.load({
        key: "9bdf0cfc4ee6e9b8321d88aed2f520f3", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.CitySearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功，result即为当前所在城市信息
                        console.log(result);
                        //加载天气查询插件
                        AMap.plugin('AMap.Weather', function () {
                            //创建天气查询实例
                            var weather = new AMap.Weather();

                            //执行实时天气信息查询
                            weather.getLive(result.city, function (err, data) {
                                console.log(err, data);
                                weatherDate.value = data
                            });
                        });
                        city.value = result.city;
                    }
                })
            })
        })
        .catch((e) => {
            console.log(e);
        });


}

onMounted(() => {
    setTime();
    setInterval(() => {
        setTime();
    }, 1000);

    initAMap();
})

</script>

<style lang="css" scoped>
.container {
    min-height: 100vh;
    background-color: #000;
    opacity: 0.6;
    color: #fff;
}

.nav {
    overflow: auto;
    padding: 10px;
}

.time {
    float: left;
}

.city {
    float: right;
}

.city-info {
    text-align: center;

}

.temp {
    font-size: 30px;
    margin-top: 10px;
}

.temp em {
    font-style: normal;
    font-size: 40px
}
</style>